<route lang="json5" type="page">
{
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "black",
    // navigationBarTitleText: '',
  },
}
</route>

<template>
  <view class="orderingDishes">
    <cu-navbar textCol="#000000" class="con">
      <template #left>
        <uv-search
          placeholder="搜索你想吃的菜品"
          v-model="searchForm.dishName"
          :showAction="false"
          margin="0 0 0 20rpx "
          placeholderColor="#969799"
          height="61rpx"
          :disabled="true"
          @click="toSearch"
        ></uv-search>
      </template>
    </cu-navbar>
    <view class="contentBox flex" :style="{ '--height': navHeight + 'px' }">
      <view class="classifyBox">
        <selectDishType :dataList="dishTypeList" @onClick="changeType"></selectDishType>
      </view>

      <view class="dishBox flex flex-col">
        <view class="tagBox flex">
          <view
            class="tag flex"
            v-for="item in tagList"
            :key="item.id"
            @click="changeTag(item)"
          >
            {{ item.name }}
            <view class="sortIcon flex flex-col">
              <view
                :class="
                  searchForm.type === item.id && searchForm.sign === 0
                    ? 'triangle up active'
                    : 'triangle up '
                "
              ></view>
              <view
                :class="
                  searchForm.type === item.id && searchForm.sign === 1
                    ? 'triangle active'
                    : 'triangle '
                "
              ></view>
            </view>
          </view>
        </view>
        <view class="dishBoxConnect" :style="{ '--bot': bottom + 8 + 'px' }">
          <selectDish
            :dataList="dishsList"
            :status="selectDishStatus"
            @scrolltolower="scrolltolower()"
            :inDom="inDom"
            @addcart="addcart"
            @onfollow="onfollow"
            @animationEnd="animationEnd"
          ></selectDish>
        </view>
      </view>
    </view>
    <view class="bottomOrder" :style="{ '--bot': bottom + 8 + 'px' }">
      <view class="orderTips" v-if="!showDishCard">
        温馨提示：每周点菜时间为周一00:00 至 周四24:00
      </view>
      <view class="orderBox" :style="{ '--bot': bottom + 8 + 'px' }">
        <view
          class="orderDish"
          :style="{ background: `${carList.length ? '#00754A' : ''}` }"
          @click="onShowDishCard"
        >
          <uv-icon
            name="tianchong3"
            custom-prefix="custom-icon"
            size="46rpx"
            color="#ffffff"
          ></uv-icon>
          <view class="tips" v-if="carList.length">{{ carList.length }}</view>
        </view>
        <view
          class="submit"
          :style="{ background: `${carList.length ? '#00754A' : ''}` }"
          @click="submitCard"
        >
          提交点菜
        </view>
      </view>
    </view>
    <dishCard
      :dataList="carList"
      v-model="showDishCard"
      @deleteItem="onDeleteItem"
    ></dishCard>

    <cu-notice ref="notice"></cu-notice>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store";
import {
  getSelectDish,
  getDishTypeSpecialty,
  getSelectBudgetOrder,
  getDeleteBudgetOrder,
  getSubNeedDishList,
} from "@/service/business/orderingDishes/index";
import {
  SelectDishList,
  SelectDishType,
  SelectDishTypeList,
  CardDishList,
  SelectDishInfo,
} from "@/service/business/orderingDishes/type";

import selectDishType from "./components/selectDishType/selectDishType.vue";
import selectDish from "./components/selectDish/selectDish.vue";
import dishCard from "./components/dishCard/dishCard.vue";
const userStore = useUserStore();
const bottom = ref(userStore.pinia_SafeVal.bottom);
// 获取高度
const navHeight = ref(0);
// 界面分页
const selectDishPages = {
  pageSize: 10,
  page: 1,
};
// tag 调教筛选
const tagList = [
  {
    id: 0,
    name: "关注",
  },
  {
    id: 1,
    name: "备选",
  },
  {
    id: 2,
    name: "好评",
  },
];
// 是否展示菜肴
const showDishCard = ref(false);
// 菜肴分页状态
const selectDishStatus = ref("loading");
// 筛选菜肴条件
const searchForm = reactive({
  // 升降序 0 表示升序 1表示降序
  sign: 1,
  // 表示升降序分类 0表示关注度，1表示被选度，3表示好评度
  type: 0,
  // 表示 分类
  newType: null,
  // 菜肴名称，
  dishName: null,
});
// 菜肴盒子
let inDom = reactive({});
// 菜肴列表
const dishsList = ref<SelectDishList>([]);
// 菜肴类型列表
const dishTypeList = ref<SelectDishTypeList>([]);
// 已选择菜肴列表
const carList = ref<CardDishList>([]);
const getHeight = () => {
  const instance = getCurrentInstance();

  const query = uni.createSelectorQuery().in(instance);
  query
    .select(".con")
    .boundingClientRect((data) => {
      navHeight.value = data.height;
    })
    .exec();
  query
    .select(".orderDish")
    .boundingClientRect((data) => {
      inDom = data;
    })
    .exec();
};
// 提交点菜
const submitCard = () => {
  if (carList.value.length > 0) {
    getSubNeedDishListApi();
  }
};
const toSearch = () => {
  uni.navigateTo({
    url: "/packageOne/pages/orderingSearch/index",
  });
};
// 关注菜品
const onfollow = (index) => {
  dishsList.value[index].attent = dishsList.value[index].attent ? 0 : 1;
};
// 加入购物车
const addcart = (param: { index: number; item: SelectDishInfo }) => {
  dishsList.value[param.index].flg = -1;
  carList.value.push({
    dishCode: param.item.dishCode,
    dishName: param.item.dishName,
    dishStyle: "",
    dishType: param.item.dishType,
    dishUrl: param.item.dishUrl,
    orderId: param.item.dishId,
    userId: 0,
  });
};

// 删除预点菜菜肴
const onDeleteItem = (item) => {
  getDeleteBudgetOrderApi(item);
};
// 选择筛选方式
const changeTag = (e) => {
  if (searchForm.type === e.id) {
    searchForm.sign = searchForm.sign ? 0 : 1;
  }
  searchForm.type = e.id;
  selectDishPages.page = 1;
  uni.showLoading();
  getselectDishApi();
};
// 选择菜肴类型
const changeType = (e: SelectDishType) => {
  searchForm.newType = e.name === "全部" ? null : e.name;
  selectDishPages.page = 1;
  uni.showLoading();
  getselectDishApi();
};
// 下拉刷新  type 为 0 请求 类型数据 为1请求菜肴数据
const scrolltolower = () => {
  selectDishPages.page++;
  getselectDishApi(1);
};
// 点击展示下周点菜
const onShowDishCard = () => {
  if (carList.value.length) {
    showDishCard.value = true;
    getSelectBudgetOrderApi();
  }
};
// 获取可选菜肴 type = 0 为基础搜索 type= 1为下拉加数据
const getselectDishApi = (type = 0) => {
  // 筛出不为null的属性
  const params = Object.fromEntries(
    Object.entries(searchForm).filter(([_, v]) => v != null)
  );

  return new Promise((resolve) => {
    getSelectDish({
      size: selectDishPages.pageSize,
      current: selectDishPages.page,
      userId: userStore.userInfo.user.userId,
      ...params,
    }).then((res) => {
      uni.hideLoading();

      if (res.retCode === 2000) {
        if (type === 0) {
          dishsList.value = res.data;
        } else {
          dishsList.value.push(...res.data);
        }
        if (dishsList.value.length === res.total) {
          selectDishStatus.value = "nomore";
        } else {
          selectDishStatus.value = "loading";
        }
      }
    });
  });
};
// 获取菜肴分类
const getDishTypeSpecialtyApi = () => {
  return new Promise((resolve) => {
    getDishTypeSpecialty({
      size: 1,
      current: 999,
    }).then((res) => {
      if (res.retCode === 2000) {
        res.data.unshift({ id: 0, name: "全部" });
        dishTypeList.value = res.data;

        // 判断是否还有数据
      }
    });
  });
};
// 获取已选择菜肴接口
const getSelectBudgetOrderApi = () => {
  return new Promise((resolve) => {
    getSelectBudgetOrder({
      userId: userStore.userInfo.user.userId,
    }).then((res) => {
      if (res.retCode === 2000) {
        carList.value = res.data;
      }
    });
  });
};
// 删除预点菜
const getDeleteBudgetOrderApi = (item) => {
  uni.showLoading();
  return new Promise((resolve) => {
    getDeleteBudgetOrder({
      userId: userStore.userInfo.user.userId,
      orderId: item.id,
    }).then((res) => {
      if (res.retCode === 2000) {
        uni.hideLoading();
        if (item.id === 0) {
          carList.value = [];
          dishsList.value.forEach((it) => {
            if (it.flg === -1) {
              it.flg = 0;
            }
          });
        } else {
          carList.value.splice(item.index, 1);
          dishsList.value.forEach((it, index) => {
           
            if (it.dishCode === item.dishCode) {
              it.flg = 0;
            }
          });
        }
      }
    });
  });
};
const notice = ref(null);
// 提交点菜
const getSubNeedDishListApi = () => {
  return new Promise((resolve) => {
    getSubNeedDishList({
      userId: userStore.userInfo.user.userId,
    }).then((res) => {
      if (res.retCode === 2000) {
        notice.value.show();
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
        getselectDishApi().then((res) => {
          dishsList.value.forEach((it) => {
            if (it.flg === -1) {
              it.flg = 1;
            }
            carList.value = [];
          });
        });
      }
    });
  });
};

onBeforeMount(() => {
  getselectDishApi();
  getDishTypeSpecialtyApi();
  getSelectBudgetOrderApi();
  getHeight();
});
</script>

<style lang="scss" scoped>
.contentBox {
  height: calc(100vh - var(--height) - 15.38rpx);
  margin-top: 15.38rpx;
  font-size: 23rpx;
  background-color: #fff;

  .classifyBox {
    flex: 7;
    height: calc(100% - 100rpx);
    background-color: #f3f3f4;
  }
  .dishBox {
    flex: 23;
    width: 100%;
    height: 100%;
    padding: 0 0 0 15.38rpx;

    .tagBox {
      align-items: center;
      justify-content: flex-end;
      height: 92rpx;
      margin-right: 30.77rpx;
      .tag {
        margin-left: 46.15rpx;

        .sortIcon {
          justify-content: center;
          margin-left: 3rpx;
        }

        .triangle {
          width: 0;
          height: 0;
          border-top: 5rpx solid #c1c2c4;
          border-right: 5rpx solid transparent !important;
          border-left: 5rpx solid transparent !important;
        }
        .up {
          margin-bottom: 5rpx;
          border-top: 0;
          border-bottom: 5rpx solid #c1c2c4;
        }
        .active {
          border-color: #595a5b;
        }
      }
    }
    .dishBoxConnect {
      height: calc(100% - 92rpx - 100rpx - var(--bot));
    }
  }
}

.bottomOrder {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-family: PingFang SC, PingFang SC;
  font-size: 23rpx;
  font-weight: 400;
  color: #595a5b;
  // height: 169.23rpx;

  background: rgba(212, 233, 226, 0.6);
  // background-color: #006241;
  border-radius: 23rpx 23rpx 0rpx 0rpx;
  z-index: 10077;
  .orderTips {
    height: 69.23rpx;
    line-height: 69.23rpx;
    text-align: center;
  }

  .orderBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    padding: 0 30.77rpx var(--bot) 30.77rpx;
    background: #ffffff;
    border-radius: 23rpx 23rpx 0rpx 0rpx;
    box-shadow: 0rpx 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.1),
      0rpx 2rpx 23rpx 0rpx rgba(0, 0, 0, 0.05);
    .orderDish {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 77rpx;
      height: 77rpx;
      background: #d4e9e2;
      border-radius: 54rpx 54rpx 54rpx 54rpx;
      .tips {
        position: absolute;
        right: 0;
        top: 0;
        width: 34.62rpx;
        height: 34.62rpx;
        text-align: center;
        line-height: 34.62rpx;
        color: #fff;
        border-radius: 100%;
        background-color: #ff363f;
      }
    }

    .submit {
      width: 215rpx;
      height: 77rpx;
      font-family: PingFang SC, PingFang SC;
      font-size: 31rpx;
      font-weight: 600;
      line-height: 77rpx;
      color: #ffffff;
      text-align: center;
      background: #d4e9e2;
      border-radius: 73rpx 73rpx 73rpx 73rpx;
    }

    .submit:active {
      opacity: 0.7;
    }
  }
}
</style>
